<template>
  <el-popover
    v-if="showPopover"
    placement="bottom"
    trigger="click"
  >
    <div class="statusMessage">
      <span>{{ rejectRemark.join(',') }}</span>
    </div>
    <i v-if="type === 1" slot="reference" class="el-icon-warning" style="cursor:pointer;" />
  </el-popover>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      default: null
    },
    type: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      rejectRemark: []
    }
  },
  computed: {
    showPopover: function() {
      this.reflush(this.item)
      return (this.rejectRemark && this.rejectRemark.length > 0)
    }
  },
  methods: {
    reflush(item) {
      if (item && item.validateMsg !== undefined && item.validateMsg !== null) {
        this.rejectRemark = JSON.parse(item.validateMsg)
      } else {
        this.clear()
      }
    },
    clear() {
      this.rejectRemark = []
    }
  }
}
</script>
<style scoped>
  .statusMessage >>> .el-divider--horizontal{
    margin: 0px 0;
    margin-bottom: 5px;
  }
</style>
